<template>
  <div ref="chart" style="width: 65vw; height: 400px"></div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";

const chart = ref(null);

onMounted(() => {
  const myChart = echarts.init(chart.value);

  const option = {
    title: {
      text: "2025告警数据",
      left: "center",
    },
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["告警"],
      top: "bottom",
    },
    xAxis: {
      type: "category",
      data: [
        "一月",
        "二月",
        "三月",
        "四月",
        "五月",
        "六月",
        "七月",
        "八月",
        "九月",
        "十月",
        "十一月",
        "十二月",
      ],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "告警",
        type: "bar",
        data: [5, 20, 36, 10, 10, 20, 30, 40, 50, 60, 70, 80],
        markPoint: {
          data: [
            { type: "max", name: "最大值" },
            { type: "min", name: "最小值" },
          ],
        },
        markLine: {
          data: [{ type: "average", name: "平均值" }],
        },
      },
    ],
  };

  myChart.setOption(option);
});
</script>

<style scoped>
/* 添加一些样式以适应图表 */
</style>
